/*
 * @Author: xiehangyun 
 * @Date: 2025-05-12 11:09:54 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-08-04 16:19:43
 */
import { Button, Price, Space } from '@nutui/nutui-react-taro';
import { Image, Text, View } from '@tarojs/components';
import { pxTransform } from '@tarojs/taro';
import { isEmpty } from 'lodash';
import { toJS } from 'mobx';
import { ReactNode } from 'react';
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import UtTag from 'src/components/UtTag/UtTag';
import goGoodsDetail from 'src/subPages/GoodsDetail/goGoodsDetail';
import utils from 'src/utils/utils';
import sizeColorPopupStore from '../SizeColorPopup/sizeColorPopupStore';
import indexStore from '../indexStore';
import styles from './GoodsList.module.less';
import left_arrowPNG from './left_arrow.png';

import { observer } from "mobx-react-lite";
import { GoodsData } from 'types/type';
import goodsApi from 'src/api/goodsApi';

interface Iprops {
    children?: ReactNode
}

// 商品列表
const GoodsList = observer((props: Iprops) => {

    const activeSecondProductType = toJS(indexStore.activeSecondProductType);
    let goodsList = toJS(indexStore.goodsList);
    let productSort = toJS(indexStore.miniProgramDecorateData.productSort);
    // goodsList 按照 productSort里面的商品排序
    let newGoodsList: Array<GoodsData> = [];

    // 选择的是全部
    if (activeSecondProductType === "") {
        // for (let { productId } of productSort) {
        //     const findGoods = goodsList.find(goods => goods.productId === productId);
        //     if (findGoods) {
        //         newGoodsList.push(findGoods);
        //     }
        // }
        newGoodsList = productSort;
    } else {
        newGoodsList = goodsList;
    }

    // for (let goods of goodsList) {
    //     // 如果没有找到，就添加到列表末尾
    //     if (!newGoodsList.some(({ productId }) => (productId === goods.productId))) {
    //         newGoodsList.push(goods);
    //     }
    // }

    return (
        <View className={styles.goodsList}>
            {
                isEmpty(newGoodsList) &&
                <MyEmpty
                    style={{
                        width: '100%',
                    }}
                    title="敬请期待..."
                />
            }
            {newGoodsList.map((goods, i) => (
                <View key={i} className={styles.goodsItem}  >
                    <View
                        className={styles.goodsImage}
                        style={{
                            backgroundImage: `url(${goods.ifShowBorder && utils.ossSuffix(goods.borderImageUrl)}),url(${utils.ossSuffix(goods.productShowImageUrl, 512)})`
                        }}
                        onClick={async () => {
                            goGoodsDetail(goods.productId);
                        }}
                    />
                    <View className={styles.goodsInfo} >
                        <Text
                            className={styles.goodsName}
                            style={{ textAlign: 'left', fontWeight: 'bold' }}
                        >
                            {goods.productName}
                        </Text>
                        <View className={styles.goodsTags}>
                            <Space>
                                <UtTag>{goods.protection}</UtTag>
                                {
                                    goods.ifPinkage === "是" &&
                                    <UtTag>包邮</UtTag>
                                }
                            </Space>
                        </View>
                        <View className={styles.goodsFooter}>
                            <Price
                                price={goods.pagePrice}
                                size="normal"
                                digits={1}
                                thousands
                            />
                            <Button
                                className={styles.goodsButton}
                                type="primary"
                                size="small"
                                onClick={async () => {
                                    const currentGoods = await goodsApi.getProductById(goods.productId);
                                    sizeColorPopupStore.setData({
                                        open: true,
                                        productId: currentGoods.productId,
                                        productTypeId: currentGoods.productNegativeId,
                                        selectedColor: currentGoods.productData.color,
                                        selectedColorValue: currentGoods.productData.colorValue,
                                        designName: currentGoods.productName,
                                    });
                                }}
                            >
                                设计
                                <Image
                                    src={left_arrowPNG}
                                    style={{
                                        width: pxTransform(10),
                                        height: pxTransform(6),
                                        verticalAlign: 'middle',
                                        marginBottom: pxTransform(4),
                                        marginLeft: pxTransform(2),
                                    }}
                                />
                            </Button>
                        </View>
                    </View>
                </View>
            ))}
        </View>
    );
});

export default GoodsList;
